<template>
  <div class="app-container home">
    <!--头部-->
    <base-info ref="baseInfo" />

    <el-row :gutter="20">
      <el-col :span="12">
        <bar-chart />
      </el-col>
      <el-col :span="11" class="as">
        <list class="list" :myarr="arr" />
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-row class="dashboard">
          <el-col :span="8">
            <pie-chart name="待办事项" name2="待付款订单" color="#5500ff"/>
          </el-col>
          <el-col :span="8">
            <pie-chart name2="待确认订单" color="#ca3e74" />
          </el-col>
          <el-col :span="8">
            <pie-chart name2="待回复客户" color="#caa93e" subtext="14" />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" class="aq">
        <list-pie class="list" :lesson="lesson" />
      </el-col>
    </el-row>

    <el-row :gutter="20" class="bottom">
      <el-col :span="10"  class="ac">
        <list-teacher  class="list1" :myarr="arr" />
      </el-col>
      <el-col :span="14" class="ab">
        <list-toutiao class="list2" :lesson="lesson" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import baseInfo from "./dashboard/components/baseInfo.vue";
import BarChart from "./dashboard/BarChart.vue";
import LineChart from "./dashboard/LineChart.vue";
import PieChart from "./dashboard/PieChart.vue";
import ListPie from "./dashboard/ListPie.vue";
import List from "./dashboard/List.vue";
import ListTeacher from "./dashboard/ListTeacher.vue";
import ListToutiao from "./dashboard/ListToutiao.vue";
import { getStudentApi,getMoneyApi,getLessonApis } from '../api/studentApi';
import eventBus from '../utils/eventBus.js'
export default {
  name: "Index",
  components: {
    BarChart,
    baseInfo,
    LineChart,
    PieChart,
    List,
    ListPie,
    ListTeacher,
    ListToutiao
  },
  data() {
    return {
      arr:[],
      lesson:[],
      keyword:'',
      page: 1, // 默认当前页 是第一页
      pageSize: 8, // 默认每页显示20条
    };
  },
  mounted() {
    this.initHome()
    this.initHomes()
    this.initHomel()
    eventBus.$on("batchtranfer", this.bathDeletefun); // 添加自定义事件
  },
  methods: {
    initHome() {
      var params = {
        keyword: this.keyword,
        page: this.page,
        pageSize: this.pageSize
      }
      getStudentApi(params).then(res => {
        // console.log(res)
        if (res.code == 200) {
          this.arr = res.data
        }
      })
    },
    initHomes() {
      var params = {
        keyword: this.keyword,
        page: this.page,
        pageSize: this.pageSize
      }
      getMoneyApi(params).then(res => {
        if (res.code == 200) {
          this.lesson = res.data
        }
      })
    },
    initHomel() {
      var params = {
        keyword: this.keyword,
        page: this.page,
        pageSize: this.pageSize
      }
      getLessonApis(params).then(res => {
        console.log(res);
        if (res.code == 200) {
          this.lesson = res.data
        }
      })
    }
  },
};
</script>

<style scoped lang="scss">
.as {
  width: 730px;
  overflow: hidden;
  .list {
    width: 100%;
    height: 410px;
    background: white;
  }
}
.dashboard {
  background-color: white;
  margin-bottom: 30px;
}
.aq {
  width: 730px;
  overflow: hidden;
  .list {
    width: 100%;
    height: 250px;
    background: white;
  }
}
.ab{
  width: 800px;
  overflow: hidden;
  margin-right: 30px;
  background: white;
  .list {
    width: 100%;
    height: 250px;
  }
}
.ac{
  width: 650px;
  overflow: hidden;
  margin-right: 20px;
  background: white;
  .list {
    width: 100%;
    height: 250px;
  }
}
.bottom{
  display: flex;
  justify-content: space-between;
}
</style>
